<template>
	<view class="addstaffbox">
		<view class="item">
			<text class="item__label">商品名称</text>
			<view class="item__content"><input type="text" class="item__content__main" value="" v-model="params.title" placeholder="请输入商品名称" /></view>
		</view>
		<view class="item">
			<text class="item__label">平台价格</text>
			<view class="item__content">
				<input type="text" class="item__content__main" value="" v-model="params.plat_price" placeholder="请输入平台价格(元)" />
				<text class="item__content__currency">元</text>
			</view>
		</view>
		<view class="item">
			<text class="item__label">门市价格</text>
			<view class="item__content">
				<input type="text" class="item__content__main" value="" v-model="params.price" placeholder="请输入门市价格(元)" />
				<text class="item__content__currency">元</text>
			</view>
		</view>
		<view class="item">
			<text class="item__label">所属分类</text>
			<view class="item__content">
				<picker @change="bindPickerChange" :range="array">
					<label class="">{{ array[index] }}</label>
				</picker>
				<text class="item__content__icon iconfontPT iconxiayibu"></text>
			</view>
		</view>
		
		<view class="item"><text class="item__label">商品图片</text></view>
		<view class="imgBox"><imageUpload :cdn="true"  checkType="md" v-model="img" /></view>
		
		<view class="item">
			<text class="item__label">商品详情</text>
			<view @click="addshopdes" class="item__content">
				<text class="item__content__main">{{ params.describe ? params.describe : '点击添加商品详情' }}</text>
				<text class="item__content__icon iconfontPT iconxiayibu"></text>
			</view>
		</view>
		<view class="item">
			<text class="item__label">是否推荐</text>
			<view class="item__content item__content--row-right"><switch @change="switchChange" /></view>
		</view>
		<view class="add" @click="add"><text>确定</text></view>
	</view>
</template>

<script>
import { getGoodsClass, addGoods, getGoodsInfo, editGoods } from '../../../apis/shop/api.js';
import imageUpload from '../../components/public/upload-gallery.vue';
export default {
	data() {
		return {
			current: 0,
			image: [],
			images: [],
			img: [],
			imgs: [],
			array: [],
			arrayid: [],
			index: 0,
			params: {
				class: '',
				is_recomend: '',
				is_package: false,
				describe: ''
			},
			store_id: '',
			token: '',
			isEdit: false,
			id: ''
		};
	},
	components: {
		imageUpload
	},

	onLoad(option) {
		this.store_id = uni.getStorageSync('store_id');
		this.token = uni.getStorageSync('token');

		if (option.id != undefined) {
			this.isEdit = true;
			this.id = option.id;
			this.getGoodsInfo(option.id);
		}
		this.getclassList();
	},
	onShow: function() {
		let pages = getCurrentPages();
		let currPage = pages[pages.length - 1]; //当前页面
		this.params.describe = currPage.data.describe;
		if(!!currPage.data.describe && currPage.data.describe!==undefined && currPage.data.describe!=''){
			this.params.describe = currPage.data.describe;
		}
		if(currPage.data.image && currPage.data.image.length>0){
			this.params.image = currPage.data.image.join(',');
		}
	},
	methods: {
		handleChooseImage(item, list) {
			this.img = list;
		},
		add() {
			if (this.img.length <= 0) {
				uni.showToast({
					title: '图片不能为空',
					icon: 'none'
				});
				return false;
			}
			if (Number(this.params.plat_price) != this.params.plat_price || Number(this.params.price) != this.params.price) {
				uni.showToast({
					title: '请输入合法价格',
					icon: 'none'
				});
				return false;
			}

			if (Number(this.params.plat_price) > Number(this.params.price)) {
				uni.showToast({
					title: '平台价格不能超过门市价格',
					icon: 'none'
				});
				return false;
			}
			this.params.img = this.img.join(',');
			this.params.store_id = this.store_id;
			this.params.token = this.token;
			console.log(this.isEdit);
			console.log(!this.isEdit);
			if (!this.isEdit) {
				addGoods(this.params).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '添加成功'
						});
						let pages = getCurrentPages(); // 当前页面
						let prePage = pages[pages.length - 2]; // 前一个页面
						prePage.setData({
							//把需要回传的值保存到上一个页面
							isDoRefesh: true
						});
						uni.navigateBack();
					}
				});
			} else {
				editGoods(this.params).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '修改成功'
						});
						let pages = getCurrentPages(); // 当前页面
						let prePage = pages[pages.length - 2]; // 前一个页面
						prePage.setData({
							//把需要回传的值保存到上一个页面
							isDoRefesh: true
						});
						uni.navigateBack();
					}
				});
			}
		},
		switchChange(e) {
			this.params.is_recomend = e.target.value ? 1 : 0;
		},
		addshopdes() {
			uni.navigateTo({
				url: '/pages/shopmanager/goodsManager/addgoodsinfo?image=' + this.params.image + '&describe=' + this.params.describe
			});
		},
		getGoodsInfo(id) {
			let that = this;
			getGoodsInfo({
				id: id,
				token: that.token
			}).then(res => {
				if (res.code === 1) {
					that.params = res.data;
					that.img = res.data.img.split(',');
					that.params.image = res.data.image;
				}
			});
		},
		getclassList() {
			let that = this;
			getGoodsClass({
				store_id: that.store_id,
				token: that.token
			}).then(res => {
				if (res.code == 1) {
					that.array = [];
					that.arrayid = [];
					for (var i in res.data.goodsClass) {
						that.array.push(res.data.goodsClass[i].title);
						that.arrayid.push(res.data.goodsClass[i].id);
					}
					this.params.class = that.arrayid[0];
				}
			});
		},
		bindPickerChange(e) {
			this.index = e.target.value;
			this.params.class = this.arrayid[this.index];
		},

		uploadImg(key) {
			let that = this;
			uni.chooseImage({
				count: 1,
				sizeType: ['copressed'],
				success(res) {
					var imgFiles = res.tempFilePaths[0];
					console.log(imgFiles);
					var uper = uni.uploadFile({
						url: that.$baseHost.car+'/api/common/upload',
						filePath: imgFiles,
						name: 'file',
						success(res) {
							if (res.statusCode == 200) {
								that.img.push(JSON.parse(res.data).data.url);
								that.imgs.push(JSON.parse(res.data).data.url);
							}
							console.log(that.image);
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="less">
.chooseImage {
	width: 220rpx;
	height: 220rpx;
	background-color: #f8f8f8;
	font-size: 24rpx;
	color: #c5c5c5;
	position: relative;

	&__icon {
		font-size: 80rpx;
		color: #ccc;
	}

	&.chooseImage2 {
		width: 220rpx;
		height: 220rpx;
	}

	image {
		position: absolute;
		z-index: 1;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
	}
}

.addstaffbox {
	padding: 0 30rpx;

	.imgBox {
		width: 100%;
		min-height: 240rpx;
		padding: 10rpx 0;
		border-bottom: 1rpx solid rgba(199, 190, 190, 0.5);

		// image {
		// 	width: 200rpx;
		// 	float: left;
		// 	margin: 0 10rpx;
		// 	height: 200rpx;
		// }
	}

	.item {
		display: flex;
		line-height: 88rpx;

		& + .item {
			border-top: 1rpx solid rgba(199, 190, 190, 0.5);
		}
		
		&__label {
			display: block;
			width: 140rpx;
			text-align: left;
			margin-right: 40rpx;
		}
		
		&__content {
			flex: 1;
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
		
			&--row-right {
				justify-content: flex-end;
			}
		
			.imgbox {
				image {
					width: 163rpx;
					height: 141rpx;
				}
			}
		
			&__main {
				color: #999;
				font-size: 26rpx;
		
				&__label {
					border: 1px solid #ffb8b1;
					border-radius: 8rpx;
					background-color: #fff8f8;
					margin: 0 20rpx 10rpx 0;
					padding: 4rpx 10rpx;
					color: #e41805;
					font-size: 20rpx;
					display: inline-block;
				}
			}
		
			switch {
				float: right;
			}
		
			&__currency,
			&__icon {
				// position: absolute;
				// right: 0;
				// bottom: 0;
			}
		
			&__currency {
				color: #333;
			}
		}

		// & > text {
		// 	display: block;
		// 	width: 140rpx;
		// 	text-align: left;
		// 	margin-right: 40rpx;
		// }

		// & > view {
		// 	flex: 1;
		// 	position: relative;

		// 	&.imgBox {
		// 		float: none;
		// 		width: 100%;
		// 	}

		// 	.imgbox {
		// 		image {
		// 			width: 163rpx;
		// 			height: 141rpx;
		// 		}
		// 	}

		// 	input {
		// 		height: 88rpx;
		// 		line-height: 88rpx;
		// 	}

		// 	switch {
		// 		float: right;
		// 	}

		// 	text {
		// 		font-size: 30rpx;
		// 		color: #999999;

		// 		&:nth-child(2) {
		// 			position: absolute;
		// 			font-size: 40rpx;
		// 			right: 0;
		// 			top: 0;
		// 			z-index: 12;
		// 		}
		// 	}
		// }
	}

	.login {
		background-color: #e41805;
		color: #fff;
		font-size: 30rpx;
		line-height: 84rpx;
		margin-top: 30rpx;
		text-align: center;
		border-radius: 5px;
	}
}

.add {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 30rpx;
	box-shadow: -1rpx -2rpx 7rpx 0rpx rgba(0, 0, 0, 0.1);
	background-color: #fff;

	text {
		display: block;
		padding: 20rpx 0;
		background-color: #e41805;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
	}
}
</style>
